<template>
	<view class="bk-top">
		<view class="bk-top-zi">
			<p style="font-size: 40rpx; margin-top: 10rpx; ;">订单已完成</p>
			<p style="font-size: 20rpx; margin-top: 10rpx;">感谢惠顾，欢迎下次光临</p>
		</view>
		<view class="bk-top-om">
			<image src="/static/onemore.png" mode=""></image>
			<p style="font-size: 20rpx;">再来一单</p>
		</view>
	</view>
	<view class="bk-cen">
		<view class="bk-cen-top">
			<view class="bk-cen-top-zi">
				<p style=";padding-top: 20rpx;">SipSite 幸福（广州六运店）</p>
				<p style="font-size: 20rpx; margin-top: 10rpx;color:#666666">天河去六运三街21号101之二</p>
			</view>
		</view>
		<view class="bk-cen-mid">
			<image src="/static/shoping.png" mode=""></image>
			<view class="bk-cen-mid-zi">
				<p style="font-size: 27rpx;">一口幸福</p>
				<p style="font-size: 23rpx; color: #666666; margin-top: 5rpx;">L/标准</p>
			</view>
			<view class="bk-cen-mid-rt">
				<p style="font-size: 27rpx;"><text style="font-size: 20rpx;">￥</text>28</p>
				<p style="font-size: 20rpx; color: #666666; margin-top: 5rpx; float: right;">x1份</p>
			</view>
		</view>
	<view class="bk-cen-btn">
		<view class="bk-cen-btn-zi">
			<text style="font-size: 20rpx; color: #666666;margin-right: 15rpx;">共1份</text>
			<text style="font-size: 20rpx; color: #666666;margin-right: 15rpx;">总价</text>
			<text style="font-size: 20rpx;">￥</text>
			<text style="font-size: 27rpx;">28</text>
		</view>
	</view>
	</view>
	<view class="bk-btn">
		<view class="bk-btn-top">
			<view class="bk-btn-top-zi">
				<text style="font-size: 27rpx;">就餐信息</text>
			</view>
					</view>
		<view class="bk-btn-zi">
			<text class="bk-btn-zi-1">用餐方式</text>
			<text class="bk-btn-zi-2">堂食</text>
		</view>
		<view class="bk-btn-zi">
			<text class="bk-btn-zi-1">就餐方式</text>
			<text class="bk-btn-zi-2">立即取餐</text>
		</view>
	</view>
	<view class="bk-btn">
		<view class="bk-btn-top">
			<view class="bk-btn-top-zi">
				<text style="font-size: 27rpx;">订单信息</text>
			</view>
					</view>
		<view class="bk-btn-zi">
			<text class="bk-btn-zi-1">支付方式</text>
			<text class="bk-btn-zi-2">在线支付￥28</text>
		</view>
		<view class="bk-btn-zi">
			<text class="bk-btn-zi-1">取餐号</text>
			<text class="bk-btn-zi-2">0222</text>
		</view>
		<view class="bk-btn-zi">
			<text class="bk-btn-zi-1">订单编号</text>
			<view class="bk-btn-zi-2">
				<text>01225008019877269299237</text>
				<view class="anniu">复制</view>
			</view>
			
			
		</view>
		<view class="bk-btn-zi">
		  <text class="bk-btn-zi-1">下单时间</text>
		  <text class="bk-btn-zi-2">{{formatDate(orderTime)}}</text>
		</view>
	</view>
	<view class="bk-buy">
		<text class="bk-buy-nun">￥28.00</text>
		<button type="default">立即支付</button>
	</view>
	<view style="height: 150rpx;">
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderTime: Date.now() 
			}
		},
		onLoad() {

		},
		methods: {
			formatDate(timestamp) {
			      const date = new Date(timestamp);
			      const year = date.getFullYear();
			      const month = String(date.getMonth() + 1).padStart(2, '0');
			      const day = String(date.getDate()).padStart(2, '0');
			      const hours = String(date.getHours()).padStart(2, '0');
			      const minutes = String(date.getMinutes()).padStart(2, '0');
			      const seconds = String(date.getSeconds()).padStart(2, '0');
			      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			    }

		}
	}
</script>

<style lang="less" scoped>
	page{
		background-color: #f4f4f4;
		margin-bottom: 30rpx;
	}
	
	.bk-top{
		width: 93%;
		height: 150rpx;
		background-color: white;
		margin: 0 auto;
		border-radius: 20rpx;
		.bk-top-zi{
			width: 220rpx;
			padding: 20rpx;	
		}
		.bk-top-om{
			float: right;
			width: 100rpx;
			margin-top: -100rpx;
			margin-right: 20rpx;
			
			image{
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
			}
		}	
	}
	.bk-cen{
		width: 93%;
		// height: 450rpx;
		background-color: white;
		margin: 0 auto;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.bk-cen-top{
			width: 93%;
			height: 130rpx;
			margin: 0 auto;
			border-bottom: 3rpx  solid #f4f4f4 ;
		}
		.bk-cen-mid{
			width: 93%;
			margin: 0 auto;
			margin-top: 40rpx;
			display: flex;
			border-bottom:3rpx solid #f4f4f4;
			padding-bottom: 30rpx;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
			}
			.bk-cen-mid-zi{
				margin-left: 20rpx;
				height: 100rpx;
			}
			.bk-cen-mid-rt{
				margin-left: auto;
			}
		}
		
	}
	.bk-cen-btn{
		width: 93%;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		padding-bottom: 30rpx;
		.bk-cen-btn-zi{
			margin-left: auto;
		}
	}
	.bk-btn{
		width: 93%;
		background-color: white;
		margin: 0 auto;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding-bottom: 40rpx;
		
		
		.bk-btn-top{
			width: 93%;
			margin: 0 auto;
			border-bottom: 3rpx  solid #f4f4f4 ;	
			.bk-btn-top-zi{
				padding: 20rpx;
				padding-left: 0;
			}
		}
		.bk-btn-zi{
			width: 93%;
			margin: 0 auto;
			margin-top: 20rpx;
			.bk-btn-zi-1{
				margin-bottom: 20rpx;
				margin-left: 0;
				color: #666666;
				font-size: 26rpx;
			}
			.bk-btn-zi-2{
				float: right;
				font-size: 26rpx;
			}
		}
		.anniu{
			background-color: white;
			// width: 70rpx;
			height: 30rpx;
			font-size: 20rpx;
			line-height: 30rpx;
			float: right;
			margin-left: 10rpx;
			padding: 2rpx 10rpx;
			border: 2rpx solid #ccc;
			border-radius: 5rpx;
			text-align: center;
		}
	}
	.bk-buy{
		width: 100%;
		background-color: white;
		// 悬浮底部
		position: fixed;
		bottom: 0;
		border-top: 1rpx solid #ccc;
		button{
			width: 40%;
			background-color:#F5D557 ;
		    color: #646464;
			// color: white;
			float: right;
			margin: 10rpx;
			}
		.bk-buy-nun{
			font-size: 40rpx;
			line-height: 110rpx;
			margin: 30rpx;
		}
	}
</style>
